<template>
  <div>
    <form class="login_form" ref="login_form">
      <div class="segment">
        <h1>{{ $t('message.BMS')}}</h1>
        <div class="lang">
            <el-dropdown>
              <i class="el-icon-refresh"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="toggleLang('zh')" :disabled="$i18n.locale == 'zh'">中文</el-dropdown-item>
                <el-dropdown-item @click.native="toggleLang('en')" :disabled="$i18n.locale == 'en'">English</el-dropdown-item>
                <el-dropdown-item @click.native="toggleLang('ja')" :disabled="$i18n.locale == 'ja'">日本語</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
      </div>
      <label>
        <input
          type="text"
          :placeholder="$t('message.username')"
          v-model="login.username"
          ref="userName"
          @change="userName"
        />
      </label>
      <label>
        <input
          type="password"
          :placeholder="$t('message.password')"
          v-model="login.password"
          ref="passWord"
          @change="passWord"
        />
      </label>

      <button class="red" type="button" ref="LOGIN" @click="Jump">
        <i class="icon ion-md-lock"></i>
        {{ $t('message.login')}}
      </button>

      <div class="segment">
        <!-- <audio
        style="text-decoration: none;outline:none"
        src="https://webfs.yun.kugou.com/202004032216/83301e1980fa04bbb0b2e9dc69add2bd/G028/M04/0A/07/XA0DAFWgMMOAR-7KAHU8l5cqGEM779.mp3"
        controls="controls"
        autoplay="autoplay"
        muted="muted"
        ></audio>-->
        <!-- <iframe
          style="display:none"
          src="https://webfs.yun.kugou.com/202004032216/83301e1980fa04bbb0b2e9dc69add2bd/G028/M04/0A/07/XA0DAFWgMMOAR-7KAHU8l5cqGEM779.mp3"
          allow="autoplay"
        ></iframe>-->
      </div>
    </form>
    <a href="#" id="warp" @click.prevent="loginUser" ref="login_btn">
      <span>LOGIN</span>
    </a>
  </div>
</template>

<script>
import { postLogin } from "@/api/login.js";
export default {
  data() {
    return {
      login: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    // 语言切换
    toggleLang(lang) {
      if(lang == 'zh'){
        localStorage.setItem('locale', 'zh')
        this.$i18n.locale = localStorage.getItem('locale')
        this.$message({
          message: '切换为中文！',
          type: 'success'
        })
      } else if (lang == 'en') {
        localStorage.setItem('locale', 'en')
        this.$i18n.locale = localStorage.getItem('locale')
        this.$message({
          message: 'Switch to English!',
          type: 'success'
        })
      }else if (lang == 'ja') {
        localStorage.setItem('locale', 'ja')
        this.$i18n.locale = localStorage.getItem('locale')
        this.$message({
          message: '日本語に切り替え!',
          type: 'success'
        })
      }
    },
    loginUser() {
      let login = this.$refs.login_form;
      if (login.style.transform == "scale(1)") {
        login.style.transform = "scale(0)";
        document.querySelector(".shade").style.opacity = "0";
      } else {
        login.style.transform = "scale(1)";
        document.querySelector(".shade").style.opacity = ".6";
      }
    },
    userName() {
      let reg = /^\S{6,18}$/;
      var user = true;
      if (reg.test(this.$refs.userName.value)) {
        user = true;
      } else {
        user = false;
        this.$message.error("长度至少六位哦~不能超过18位");
      }
      return user;
    },
    passWord() {
      let reg = /^\d{6,18}$/;
      var pass;
      if (reg.test(this.$refs.passWord.value)) {
        pass = true;
      } else {
        pass = false;
        this.$message.error("长度至少六位哦~");
      }
      return pass;
    },
    Jump() {
      if (this.passWord() && this.userName()) {
        postLogin(this.login).then(res => {
          if (res.meta.status === 200) {
            this.$router.push("admin");

            localStorage.setItem("token", res.data.token);

            this.$message({
              message: "登录成功",
              type: "success"
            });
          } else {
            this.$message.error("帐号密码效验失败哦~~");
          }
        });
      }
    }
  }
};
</script>

<style lang="scss">
</style>

<style lang="scss" scoped>
p,
input,
select,
textarea,
button {
  font-family: "Montserrat", sans-serif;
  letter-spacing: -0.2px;
  font-size: 16px;
  opacity: 0.99;
  text-decoration: none;
}

div,
p {
  color: #ffffff;
  letter-spacing: 3px;
  text-shadow: 0px 0px 3px rgb(219, 219, 219);
}
/* 语言切换 */
.lang{
  display: inline-block;
}
.el-icon-refresh{
  font-size: 30px;
}

form {
  padding: 16px;
  width: 320px;
  margin: 0 auto;
  transition: 200ms;
  transform: scale(0);
}
#warp {
  position: absolute;
  z-index: 9;
  bottom: 3em;
  left: 0;
  right: 0;
  margin: 20px auto;
  color: rgb(255, 255, 255);
  border: 2px solid;
  padding: 1em;
  width: 10em;
  text-align: center;
  // font-weight: 700;
  font-size: 1.2em;
  display: inline-block;
  text-decoration: none;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.8);
}
#warp:hover span {
  text-shadow: 0px 0px 20px rgb(255, 255, 255) !important;
}
.segment {
  padding: 32px 0;
  text-align: center;
}

button,
input {
  border: 0;
  outline: 0;
  font-size: 16px;
  border-radius: 5px;
  padding: 16px;
  background-color: #ffffff;
  text-shadow: 0px 0px 1px #fff;
}

label {
  display: block;
  margin-bottom: 24px;
  width: 100%;
}

input {
  margin-right: 8px;
  box-shadow: 0px 0px 1px#fff;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease-in-out;
  appearance: none;
  -webkit-appearance: none;
}
input:focus {
  box-shadow: 0px 0px 1px#fff;
}

button {
  color: #61677c;
  font-weight: bold;
  box-shadow: 0px 0px 1px#fff;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  font-weight: 600;
}
button:hover {
  box-shadow: 0px 0px 12px #fff;
}
button:active {
  box-shadow: 0px 0px 1px #fff;
}
button .icon {
  margin-right: 8px;
}
button.unit {
  border-radius: 8px;
  line-height: 0;
  width: 48px;
  height: 48px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 8px;
  font-size: 19.2px;
}
button.unit .icon {
  margin-right: 0;
}
button.red {
  display: block;
  width: 100%;
  color: #414141;
}

.input-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.input-group label {
  margin: 0;
  flex: 1;
}
</style>
